<template>
	<view class="container">
		<view class="dropdown-module">
			<ren-dropdown-filter @click="hideVideo" @clickMask="hideVideo" class="fixed" :filterData='filterData' :defaultIndex='defaultIndex'
			 @onSelected='onSelected' @dateChange='dateChange'></ren-dropdown-filter>
		</view>
		<!-- 实时视频 -->
		<view class="video-module">
			<!-- 界面视频 -->
			<video id="myVideo" v-if="showVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"></video>
			<!-- 视频替代品view -->
			<view class="video-cover" v-else></view>
			<!-- 操作键 -->
			<scroll-tabs :tabs="tabs" paddingItem="0 51rpx"></scroll-tabs>
		</view>
		<!-- 子tab界面 -->
		<view class="control-setting">
			<view class="sub-tabs">
				<view :data-tab="1" @tap="chickTab">
					<text :class="[currentTab == 1 ? 'activeColor': '']">云台控制</text>
					<view :class="[currentTab == 1 ? 'line': '']"></view>
				</view>
				<view :data-tab="2" @tap="chickTab">
					<text :class="[currentTab == 2 ? 'activeColor': '']">预置点</text>
					<view :class="[currentTab == 2 ? 'line': '']"></view>
				</view>
				<!-- <view v-if="!pills"class="line"></view> -->
				<!-- <view v-if="isActive == currentTab" class="border"></view> -->
			</view>
			<!-- 云台控制 -->
			<view class="setting-module row" v-if="currentTab == 1">
				<view class="left-module">
					<!-- 变倍 -->
					<view class="change-speed">
						<text>变速</text>
						<image @tap="slowenSpeed" :src="reduceImg"></image>
						<image @tap="fastenSpeed" :src="addImg"></image>
					</view>
					<!-- 聚焦 -->
					<view class="focus margin50">
						<text>聚焦</text>
						<image @tap="reduceFocus" :src="focusReduce"></image>
						<image @tap="enlargeFocus" :src="focusEnlarge"></image>
					</view>
					<!-- 光圈 -->
					<view class="aperture">
						<text>光圈</text>
						<image @tap="reduceAperture" :src="apertureReduce"></image>
						<image @tap="enlargeAperture" :src="apertureEnlarge"></image>
					</view>
				</view>
				<view class="right-module">
					<view class="image-bg">
						<image @tap="resetClick" :src="resetImg" class="reset"></image>
						<text @tap="resetClick">重置</text>
						<!-- 上 下 左 右 箭头 -->
						<image @tap="upClick" :src="upArrow" class="up-arrow image-size"></image>
						<image @tap="downClick" :src="downArrow" class="down-arrow image-size"></image>
						<image @tap="leftClick" :src="leftArrow" class="left-arrow image-size"></image>
						<image @tap="rightClick" :src="rightArrow" class="right-arrow image-size"></image>
					</view>
				</view>
			</view>
			<!-- 预置点 -->
			<view class="setting-module" v-if="currentTab == 2">
				<table>
					<tr class="border">
						<th class="wid25">序号</th>
						<th class="wid25">名称</th>
						<th class="wid25">预置点号</th>
						<th class="wid25">控制</th>
					</tr>
					<!-- 循环每条数据 -->
					<tr v-for="(item, index) in presetPointList" :key="index">
						<td class="wid25">{{index | formatNum}}</td>
						<td class="wid25">{{item.name}}</td>
						<td class="wid25">{{item.num | formatNum}}</td>
						<td class="wid25">
							<view class="play">调用</view>
						</td>
					</tr>
				</table>
			</view>
		</view>

	</view>
</template>

<script>
	import renDropdown from '../../components/ren-dropdown-filter/ren-dropdown-filter.vue'
	import srcollTabs from '../../components/scroll-tabs/scroll-tabs.vue'
	export default {
		filters: {
			formatNum(n) {
				n = (n + 1).toString()
				return n[1] ? n : '0' + n
			}
		},
		components: {
			renDropdown,
			srcollTabs
		},
		data() {
			return {
				pills: false,
				showVideo: true,
				filterData: [
					[{
						text: '配电房1',
						value: ''
					}, {
						text: '配电房1',
						value: 1
					}, {
						text: '配电房2',
						value: 2
					}, {
						text: '配电房3',
						value: 3
					}],
					[{
						text: '摄像机1',
						value: ''
					}, {
						text: '摄像机1',
						value: 1
					}, {
						text: '摄像机2',
						value: 2
					}, {
						text: '摄像机3',
						value: 3
					}]
				],
				defaultIndex: [0, 0],
				tabs: [{
						id: 1,
						name: '暂停',
						img: '../../static/image/rvc/pause.png'
					},
					{
						id: 2,
						name: '抓图',
						img: '../../static/image/rvc/screenshot.png'
					},
					{
						id: 3,
						name: '声音',
						img: '../../static/image/rvc/voice.png'
					},
					{
						id: 4,
						name: '录像',
						img: '../../static/image/rvc/recording.png'
					},
					{
						id: 5,
						name: '全屏',
						img: '../../static/image/rvc/full-screen.png'
					}
				],
				currentTab: 1,
				isActive: 1,
				presetPointList: [{
						id: 1,
						name: '大门',
						num: 1
					},
					{
						id: 2,
						name: '南围墙1',
						num: 2
					},
					{
						id: 3,
						name: '南围墙2',
						num: 3
					},
					{
						id: 4,
						name: '南围墙3',
						num: 4
					}
				],
				reduceImg: '../../static/image/rvc/reduce-speed.png',
				addImg: '../../static/image/rvc/add-speed.png',
				apertureEnlarge: '../../static/image/rvc/aperture-enlarge.png',
				apertureReduce: '../../static/image/rvc/aperture-reduce.png',
				focusEnlarge: '../../static/image/rvc/focus-enlarge.png',
				focusReduce: '../../static/image/rvc/focus-reduce.png',
				settingBg: '../../static/image/rvc/setting-bg.png',
				resetImg: '../../static/image/rvc/reset.png',
				upArrow: '../../static/image/rvc/up-arrow.png',
				downArrow: '../../static/image/rvc/down-arrow.png',
				leftArrow: '../../static/image/rvc/left-arrow.png',
				rightArrow: '../../static/image/rvc/right-arrow.png',
			}
		},
		methods: {
			onSelected(res) {
				console.log(res)
			},
			// 隐藏video
			hideVideo() {
				this.showVideo = !this.showVideo
				console.log(this.showVideo)
			},
			chickTab(e) {
				this.currentTab = e.currentTarget.dataset.tab
				this.isActive = e.currentTarget.dataset.tab
				// console.log('eee', e.currentTarget.dataset.tab)
			},
			// 变速、聚焦、光圈
			slowenSpeed() {
				console.log('slowenSpeed')
			},
			fastenSpeed() {
				console.log('fastenSpeed')
			},
			reduceFocus() {
				console.log('reduceFocus')
			},
			enlargeFocus() {
				console.log('enlargeFocus')
			},
			reduceAperture() {
				console.log('reduceAperture')
			},
			enlargeAperture() {
				console.log('enlargeAperture')
			},
			// 重置
			resetClick() {
				console.log('reset')
			},
			// 向上下左右点击事件
			upClick() {
				console.log('up...')
			},
			downClick() {
				console.log('downClick')
			},
			leftClick() {
				console.log('leftClick')
			},
			rightClick() {
				console.log('rightClick')
			},

		}

	}
</script>

<style lang="scss">
	@import '@/common/base64/base64.scss';

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;

		.dropdown-module {
			height: 88rpx;
			width: 100%;
			z-index: 999999 !important;
			white-space: nowrap;
			position: fixed;
			top: 0;
		}

		.fixed {
			z-index: 999999 !important;
		}

		.video-module {
			width: 100%;
			margin-top: 88rpx;
			z-index: 99;
		}

		.displayNone {
			display: none;
		}

		.video-cover {
			// background-color: transparent;
			// opacity:0.1;
		}

		video,
		.video-cover {
			width: 100%;
			height: 421rpx;
		}

		.control-setting {
			margin-top: 10rpx;
			background-color: #fff;
			height: 100%;

			.sub-tabs {
				height: 88rpx;
				line-height: 88rpx;
				display: flex;

				view {
					flex: 1;
					text-align: center;
					font-size: 28rpx;
					position: relative;
					justify-content: center;
					position: relative;
				}

				text {
					padding: 8rpx;
				}

				.activeColor {
					color: #1DD3B8;
				}

				.line {
					position: absolute;
					bottom: 0;
					left: 50%;
					// transition: all 0.3s linear;
					width: 24rpx;
					height: 6rpx;
					background: #1dd3b8;
					border-radius: 3rpx;
					transform: translateX(-50%);
				}

				.border {
					position: absolute;
					bottom: 0;
					width: 24rpx;
					height: 6rpx;
					background: #1dd3b8;
					border-radius: 3rpx;
					transition: all 0.3s linear;
				}
			}

			.setting-module {
				width: 100%;
				margin-top: 14rpx;

				.left-module,
				.right-module {
					flex: 1;
				}

				.left-module {
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding: 0 48rpx;

					view {
						display: flex;
						flex-direction: row;
						justify-content: space-between;

						image {
							width: 79rpx;
							height: 60rpx;
						}
					}
				}

				.right-module {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					margin-bottom: 15rpx;
					// position: relative;

					.image-bg {
						width: 323rpx;
						height: 320rpx;
						background: url($rvc-image_bg) center center no-repeat;
						background-size: 100% 100%;
						position: relative;

						// 重置图片
						.reset {
							position: absolute;
							transform: translate(-50%, -50%);
							top: 50%;
							left: 50%;
							width: 172rpx;
							height: 168rpx;
						}

						// 重置文本
						text {
							position: absolute;
							transform: translate(-50%, -50%);
							top: 50%;
							left: 50%;
							z-index: 99;
							text-align: center;
							color: #ffffff;
							font-size: 32rpx;
						}

						.image-size {
							width: 58rpx;
							height: 58rpx;
							z-index: 99;
							position: absolute;
						}

						.up-arrow,
						.down-arrow {
							left: 50%;
							transform: translateX(-50%);
						}

						.left-arrow,
						.right-arrow {
							transform: translateY(-50%);
							top: 50%;
						}

						.up-arrow {
							top: 14rpx;
						}

						.down-arrow {
							bottom: 14rpx;
						}

						.left-arrow {
							left: 14rpx;
						}

						.right-arrow {
							right: 14rpx;
						}
					}
				}

				&.row {
					display: flex;
					flex-direction: row;
					justify-content: center;
				}

				.margin50 {
					margin: 50rpx 0;
				}

				table {
					font-size: 26rpx;

					tr {
						display: flex;
						flex-direction: row;
						align-items: center;
						white-space: nowrap;

					}

					th,
					td {
						text-align: center;
					}

					th {
						height: 60rpx;
						line-height: 60rpx;
						color: #999;
					}

					td {
						height: 80rpx;
						line-height: 80rpx;
						white-space: nowrap;
						overflow: hidden;
						color: #333;
					}

					.play {
						width: 104rpx;
						height: 48rpx;
						color: #fff;
						background: #1dd3b8;
						border-radius: 26rpx;
						text-align: center;
						line-height: 48rpx;
					}

					.wid15 {
						width: 15%;
					}

					.wid20 {
						width: 25%;
					}

					.wid25 {
						width: 25%;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.right {
						text-align: right;
					}

					.left {
						text-align: left;
					}

					.border {
						border-bottom: 2rpx solid #F5F6F9;
					}
				}
			}

		}
	}
</style>
